<template>
    <div id="mobileBind">
        <header div class="head">        
            <div class="back" @click="$router.go(-1)">            
                <mu-icon value="chevron_left"  />
            </div>
            <div class="head_text"  >
                {{ msg }}
            </div>
            <div class="flex1"></div>
        </header>

        <div class="mobileNo">
            <div class="mob">
                <mu-text-field  v-model="phone" hintText="请输入手机号"  fullWidth />
            </div>
            <div class="verify">
                <mu-raised-button :label="VerificationCode" class="demo-raised-button" primary @click="getverify"/>
            </div>
        </div>
        <div class="verification">
             <mu-text-field v-model="inputcode"  hintText="验证码"  fullWidth />
        </div>
        <mt-button type="primary" @click="check">提交绑定</mt-button>
    </div>
</template>

<script>
    // import Vue from 'vue'
    import {
        Toast
    } from 'mint-ui';
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from 'vuex'
    export default {
        name: 'myself', //组件的名字
        data() {
            return { //数据
                msg: '绑定手机',
                time: 0,
                disabled: false,
                phone: '',
                smsCode: '', //接收到的手机验证码
                inputcode: '' //用户输入的手机验证码
            }
        },
        methods: { //方法
            ...mapMutations(['setVerificationCode']),
            initdatalist(){
                let vm = this
                let wx = JSON.stringify({openId:$.local_Storage.getItem('wxopenid')})
                $.hsf.ajaxPost('user/searchUserByOpenId',wx,'',function(result){
                    console.log(result)
                    //alert(result.data)
                    if(result.code == '200'){
                        if(result.data != null){
                            $.UIAlert('您已经绑定！',function(){
                                vm.$router.go(-1)
                            })
                        }
                    }
                })
            },
            check() {
                let vm = this
                let infos = JSON.stringify({
                        recNum: this.phone,
                        smsCode: this.inputcode
                })
                console.log(infos)
                if (this.phone != '' && this.smsCode != '' && this.inputcode != '') {
                    $.hsf.ajaxPost('msg/authSmsCode',infos, '', function(result) {
                        console.log(result)
                        if (result.data == 'SUCCESS') {
                            let obj = {
                                openId:$.local_Storage.getItem('wxopenid'),
                                mobile:vm.phone,
                                nickName:$.local_Storage.getItem('nickName'),
                                icon:$.local_Storage.getItem('headimgurl')
                            }
                            let objs = JSON.stringify(obj)
                            console.log(objs)
                            //alert(objs)
                            $.hsf.ajaxPost('user/userBindWechat',objs,'',function(result){
                                console.log(result)
                                if(result.code == '200'){
                                    Toast('绑定成功')
                                    vm.$router.go(-1) 
                                }else{
                                    Toast('绑定失败')
                                }
                            })
                        } else if(result.data == 'FAILED') {
                            Toast('绑定失败');
                        }else{
                            Toast('网络延时');
                        }
                    })
                }
            },
            getverify() {
                let phone = this.phone;

                let s = 6;
                let VerificationCode = this.VerificationCode
                let vm = this
                if (!isNaN(VerificationCode)) return
                if (!this.cmf.isPhone(phone)) {
                    Toast('请输入正确的手机号');
                    return false;
                }
                let setinit = setInterval(() => {
                    s = s - 1;
                    vm.setVerificationCode(s.toString());
                    if (s <= 0) {
                        clearTimeout(setinit)
                        vm.setVerificationCode('验证码');
                    }
                }, 1000)
                let obj = JSON.stringify({
                    recNum: phone
                })
                console.log(obj)
                $.hsf.ajaxPost('msg/getVerifyCode',obj,'', function(result) {
                    console.log(result)
                    if (result.code == 200) {
                        Toast('短信发送成功');
                        vm.smsCode = result.data
                    } else {
                        Toast('短信发送失败');
                    }
                })
            }
        },
        computed: { //计算 用来引入vuex里面state
            ...mapState(['VerificationCode'])
        },
        mounted: function() { //组件加载完成
            /*let wxopenid = $.local_Storage.getItem('wxopenid')
            let nickName = $.local_Storage.getItem('nickName')
            let headimgurl = $.local_Storage.getItem('headimgurl')
            alert(wxopenid)
            alert(nickName)
            alert(headimgurl)*/
            this.initdatalist()
        },
        watch: { //健康某个数据变化后触发某个事件
            
        },
        destroyed: function() { //离开这个组件
        },
        components: {

        }

    }
</script>
<style scoped>
    .mobileNo {
        display: flex;
        padding: 0 1%;
        margin-top: 20px;
    }
    
    img {
        width: 100%;
        height: 100%;
    }
    
    .mob {
        flex: 5;
    }
    
    .verify {
        flex: 2;
        text-align: center;
    }
    
    .verification {
        padding: 0 1%;
    }
    
    .btngetverify {
        width: 80%;
        padding: 2px 4px;
    }
    
    .mint-field-other button {
        display: inline-block;
        width: 120px;
        height: 48px;
        background: #c6c6c6;
        text-align: center;
        line-height: 48px;
        border: none;
    }
    
    .mint-button--normal {
        width: 100%;
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->